<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下级关系</title>
</head>
<style type="text/css">
    p {
        margin: 0;
    }

    body,
    .tree {
        min-width: 100%;
        min-height: 80vh;
        background-color: white;
        /* display: flex;
        justify-content: space-around; */
    }

    .tree .parent {
        width: 60px;
        min-height: 50px;
        background-color: #FFFFFF;
        position: relative;
        font-size: 12px;
        margin: auto;
    }

    .tree .parent > img {
        width: 100%;
        overflow: hidden;
        z-index: 2;
        border-radius: 10px;
        cursor: pointer;
    }

    .tree .parent > div {
        height: 40px;
        margin-bottom: 20px;
        text-align: center;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tree ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .tree ul li {
        margin: 0 10px;
        position: relative;
        flex: 1;
    }

    .tree .line {
        width: 2px;
        height: 20px;
        background-color: black;
        margin: 0 auto;
    }

    .tree .last {
        width: 2px;
        height: 24px;
        position: absolute;
        top: 120px;
        left: calc(50% - 1px);
        background-color: black;
    }

    .tree .long-left {
        width: calc(100% + 20px);
        height: 2px;
        position: absolute;
        top: 0;
        right: 50%;
        margin: auto;
        background-color: black;
    }

    .tree li:first-child > .long-left {
        display: none;
    }

    .tree .long-right {
        width: calc(100% + 20px);
        height: 2px;
        position: absolute;
        top: 0;
        left: 50%;
        margin: auto;
        background-color: black;
    }

    .tree li:last-child > .long-right {
        display: none;
    }
</style>
<body>
<div class="tree" style="overflow-x:auto;display: none">
</div>
</body>
<!--<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>-->

<script>
    var userIds = $("#userId").val();

    function friendRelationship(user) {
        userIds = user
        $.ajax({
            type: "POST",
            url: "../../sys/buserinfo/getSubordinate",
            contentType: "application/json",
            data: JSON.stringify(userIds),
            success: function (r) {
                if (r.code == 0) {
                    var jion = ""
                    var datasj = r.children
                    if (datasj && datasj.length > 0) {
                        for (let i = 0; i < datasj.length; i++) {
                            var laD = ""
                            var jionA = ""
                            if (datasj[i].children && datasj[i].children.length > 0) {
                                for (let a = 0; a < datasj[i].children.length; a++) {
                                    var la = ""
                                    var jionB = ""
                                    if (datasj[i].children[a].children && datasj[i].children[a].children.length > 0) {
                                        for (let b = 0; b < datasj[i].children[a].children.length; b++) {
                                            var laA = ""
                                            var jionC = ""
                                            if (datasj[i].children[a].children[b].children && datasj[i].children[a].children[b].children.length > 0) {
                                                for (let c = 0; c < datasj[i].children[a].children[b].children.length; c++) {
                                                    jionC += `
                                    <li>
                                        <div class="long-left"></div>
                                        <div class="long-right"></div>
                                        <div class="line"></div>
                                        <div class="parent" id="` + datasj[i].children[a].children[b].children[c].value + `" title="` + datasj[i].children[a].children[b].children[c].name + `">
                                            <img src="` + datasj[i].children[a].children[b].children[c].symbol + `"alt="">
                                             <div>
                               ` + datasj[i].children[a].children[b].children[c].name + `
                               <p>  ` + datasj[i].children[a].children[b].children[c].value +`</p>
                            </div>
                                        </div>
                                    </li>`
                                                }
                                                laA = `  <div class="last"></div>`
                                            }
                                            jionB += `
                            <li>
                                <div class="long-left"></div>
                                <div class="long-right"></div>
                                <div class="line"></div>
                                <div class="parent" id="` + datasj[i].children[a].children[b].value + `"  title="` + datasj[i].children[a].children[b].name + `">
                                    <img src="` + datasj[i].children[a].children[b].symbol + `"alt="">
                                     <div>
                               ` + datasj[i].children[a].children[b].name + `
                               <p>  ` + datasj[i].children[a].children[b].value + `</p>
                            </div>
                                </div>
                                ` + laA + `
                                <ul class="children" >
                                ` + jionC + `
                                </ul>
                            </li>`
                                        }
                                        la = `  <div class="last"></div>`
                                    }
                                    jionA += `
                    <li>
                        <div class="long-left"></div>
                        <div class="long-right"></div>
                        <div class="line"></div>
                        <div class="parent" id="` + datasj[i].children[a].value + `" title="` + datasj[i].children[a].name + `">
                          <img src="` + datasj[i].children[a].symbol + `"alt="">
                            <div>
                               ` + datasj[i].children[a].name + `
                               <p>  ` + datasj[i].children[a].value + `</p>
                            </div>
                        </div>
                      ` + la + `
                        <ul class="children">
                        ` + jionB + `
                        </ul>
                    </li>`
                                }
                                laD = `  <div class="last"></div>`
                            }
                            jion += `
        <ul class="children">
            <li>
                <div class="long-left"></div>
                <div class="long-right"></div>
                <div class="line"></div>
                <div class="parent" id="` + datasj[i].value + `" title="` + datasj[i].name + `">
                   <img src="` + datasj[i].symbol + `"alt="">
                    <div>
                    ` + datasj[i].name + `
                    <p>   ` + datasj[i].value + `</p>
                    </div>
                </div>
              ` + laD + `
                <ul class="children">
                ` + jionA + `
                </ul>
            </li>
        </ul>
        `
                        }
                    }
                    $(".tree").html(jion)
                    $(".tree").show(1000)
                    $(".line").eq(0).css("opacity", "0")
                } else {
                    alert(r.msg);
                }
            }
        });
    }

    friendRelationship($("#userId").val())
    $(document).on('click', '.tree .children .parent', function () {
        $(".tree").hide()
        let userId = $(this).attr("id");
        console.log(userId)
        friendRelationship(userId)
    });
</script>
</html>
